<template>
    <div>
        <span class="name">按省份选择:</span>
        <MSelect :list="provinceList" title="省份" :value="province" :showWrapperActive="provinceActive"
            @change_active="changepProvinceActive" @change="changeProvince" className="province" />

        <MSelect :list="cityList" title="城市" :value="city" :showWrapperActive="cityActive"
            @change_active="changepCityActive" @change="changeCity" :disabled="cityDisabled" className="city" />
        <span>直接搜索</span>
        <el-select v-model="searchWord" filterable remote reserve-keyword placeholder="请输入关键词"
            :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in searchList" :key="item" :label="item" :value="item">
            </el-option>
        </el-select>
    </div>
</template>

<script>
import api from '@/api/index.js'
import MSelect from './MSelect.vue'
export default {
  nmae: 'province',
  data () {
    return {
      // provinceList: ['辽宁省', '内蒙古', '山西省', '青海省', '四川省', '贵州省', '云南省', '陕西省', '西藏', '宁夏', '新疆', '广西', '海南省', '湖南省', '湖北省', '河南省', '山东省', '江西省', '安徽省', '浙江省', '上海市', '黑龙江省', '吉林省', '甘肃省', '天津市', '河北省'],
      provinceList: [],
      province: '省份',
      cityList: ['哈尔滨', '株洲市', '衡阳市', '长沙市', '永州市'],
      city: '城市',
      provinceActive: false,
      cityActive: false,
      searchList: ['哈尔滨', '株洲市', '衡阳市', '长沙市', '永州市'],
      searchWord: '',
      loading: false,
      cityDisabled: true
    }
  },
  components: {
    MSelect
  },
  created () {
    api.getProvinceList().then(res => {
      this.provinceList = res.data.data.map((item) => {
        item.name = item.provinceName
        return item
      })
      console.log(this.provinceList[0].provinceName, 111)
    })
  },
  methods: {
    changepProvinceActive (flag) {
      this.provinceActive = flag

      if (flag) {
        this.cityActive = false
      }
    },
    changepCityActive (flag) {
      this.cityActive = flag
      if (flag) {
        this.provinceActive = false
      }
    },
    changeProvince (item) {
      this.province = item.name
      this.cityDisabled = false
      this.cityList = item.cityInfoList
    },
    changeCity (item) {
      this.city = item.name
      this.$store.dispatch('setPosition', item)
      this.$router.push({ name: 'index' })
    },
    remoteMethod (val) {
      // 请求后端接口
      console.log(val)
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/css/changecity/iselect.scss";
</style>
